<template>
  <div class="bottom_border">
    <el-form ref="zeroForm" :model="zeroData" :rules="rules" size="mini" label-width="86px" label-position="left">
      <el-card :body-style="{ padding: '0px' }">
        <el-row :span="4">
          <el-form-item label="访视日期" prop="dateNow" style="margin-top: 20px">
            <el-date-picker
              v-model="zeroData.dateNow"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              clearable
              style="width: 50%;"
              :disabled="this.isModel"
            />
          </el-form-item>
        </el-row>
      </el-card>
      <div style="padding: 10px 0 10px 0">
        <p class="title">
          <span>一般资料</span>
        </p>
      </div>
      <el-card :body-style="{ padding: '0px' }">
        <el-row>
          <!-- 一般资料部分 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名缩写:" prop="name" >
                <el-input v-model="zeroData.name" clearable :style="{ width: '80%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="住院号:" prop="inHospital">
                <el-input v-model="zeroData.inHospital" clearable :style="{ width: '80%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身高(cm):" prop="height">
                <el-input v-model="zeroData.height" clearable :style="{ width: '80%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="体重(kg):" prop="weight">
                <el-input v-model="zeroData.weight" clearable :style="{ width: '80%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="术前诊断" prop="diagnosis">
                <el-input v-model="zeroData.diagnosis" clearable :style="{ width: '100%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2.5">
              <span>术前NRS评分(0-10分):</span>
            </el-col>
            <el-col :span="6">
              <el-form-item label="静息评分" prop="staticScore" >
                <el-select v-model="zeroData.staticScore" placeholder="请选择评分" :style="{ width: '80%' }" :disabled="this.isModel">
                  <el-option v-for="score in 11" :key="score" :label="score - 1" :value="score - 1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运动评分" prop="actScore">
                <el-select v-model="zeroData.actScore" placeholder="请选择评分" :style="{ width: '80%' }" :disabled="this.isModel">
                  <el-option v-for="score in 11" :key="score" :label="score - 1" :value="score - 1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="3">
              <span>生命体征及体格检查:</span>
            </el-col>
            <el-col :span="4">
              <el-form-item label="心率(次/分):" prop="heartRate" label-width="auto">
                <el-input v-model="zeroData.heartRate" clearable :style="{ width: '50%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="血压(mmHg):" prop="sysPres" label-width="auto">
                <el-input v-model="zeroData.sysPres" clearable :style="{ width: '50%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="/" prop="diasPres" label-width="auto" :show-message="false" :required="false">
                <el-input v-model="zeroData.diasPres" clearable :style="{ width: '50%' }" :disabled="this.isModel">
                </el-input>
                <span style="font-weight: 1000; color: #606269">(收缩压/舒张压)</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="呼吸(次/分):" prop="breath" label-width="auto">
                <el-input v-model="zeroData.breath" clearable :style="{ width: '50%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="体温(℃):" prop="temp" label-width="auto">
                <el-input v-model="zeroData.temp" clearable :style="{ width: '50%' }" :disabled="this.isModel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </el-card>
      <div style="padding: 10px 0 10px 0">
        <p class="title">
          <span>入选标准</span>
        </p>
      </div>
      <el-card :body-style="{ padding: '0px' }">
        <el-row>
          <!-- 入选标准部分 -->
          <div>
            <el-form-item
              label="择期行混合痔外剥内扎术或肛瘘手术患者，年龄≥18岁，性别不限； 美国麻醉医师协会分级（ASA ）Ⅰ-Ⅲ级"
              prop="inclOne" label-width="80%">
              <el-radio-group v-model="zeroData.inclOne" size="small" :disabled="this.isModel">
                <el-radio v-for="(item, index) in inclOneOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="BMI值在18-30kg/m2 之间。" prop="inclTwo" label-width="80%">
              <el-radio-group v-model="zeroData.inclTwo" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in inclTwoOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="既往无镇痛药物和局麻药物过敏史。" prop="inclThree" label-width="80%">
              <el-radio-group v-model="zeroData.inclThree" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in inclThreeOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="无其他严重合并疾病，术前评估能耐受手术治疗。" prop="inclFour" label-width="80%">
              <el-radio-group v-model="zeroData.inclFour" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in inclFourOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="能够签署知情同意书，愿意接受相关治疗方案。" prop="inclFive" label-width="80%">
              <el-radio-group v-model="zeroData.inclFive" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in inclFiveOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <div style="font-size: 18px;color: #F59A23;margin: 0 0 15px 0">
              <i class="el-icon-warning"></i>
              <span>排除标准回答有任何一项为“否”，受试者即不能参加本次试验。</span>
            </div>
          </div>
        </el-row>
      </el-card>
      <div style="padding: 10px 0 10px 0">
        <p class="title">排除标准</p>
      </div>
      <el-card :body-style="{ padding: '0px' }">
        <div>
          <el-row>
            <!-- 排除标准部分 -->
            <el-form-item label="有相关麻醉禁忌症。" prop="standOne" label-width="80%">
              <el-radio-group v-model="zeroData.standOne" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standOneOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="术后住院时间＜72h的患者。" prop="standTwo" label-width="80%" label-class="label">
              <el-radio-group v-model="zeroData.standTwo" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standTwoOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="近一年内曾行痔疮切除或肛瘘手术患者。" prop="standThree" label-width="80%">
              <el-radio-group v-model="zeroData.standThree" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standThreeOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="伴有严重的心、肝、肾疾病者。" prop="standFour" label-width="80%">
              <el-radio-group v-model="zeroData.standFour" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standFourOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="不能表达主观不适症状者。" prop="standFive" label-width="80%">
              <el-radio-group v-model="zeroData.standFive" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standFiveOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="接受其他有关治疗，该治疗可能对本研究结果有较大影响者。" prop="standSix"
                          label-width="80%">
              <el-radio-group v-model="zeroData.standSix" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standSixOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="合并精神疾病或严重神经功能症患者。" prop="standSeven" label-width="80%">
              <el-radio-group v-model="zeroData.standSeven" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standSevenOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="妊娠或哺乳期妇女。" prop="standEight" label-width="80%">
              <el-radio-group v-model="zeroData.standEight" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standEightOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="对试验药物过敏者。" prop="standNine" label-width="80%">
              <el-radio-group v-model="zeroData.standNine" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standNineOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="有滥用药物、毒品或酗酒史者。" prop="standTen" label-width="80%">
              <el-radio-group v-model="zeroData.standTen" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standTenOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="研究者认为其不适合参与本项研究的患者。" prop="standElev" label-width="80%">
              <el-radio-group v-model="zeroData.standElev" size="medium" :disabled="this.isModel">
                <el-radio v-for="(item, index) in standElevenOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
        </div>
        <div style="font-size: 18px;color: #F59A23;margin: 0 0 15px 0">
          <i class="el-icon-warning"></i>
          <span>排除标准回答有任何一项为“是”，受试者即不能参加本次试验。</span>
        </div>
      </el-card>
      <el-card :body-style="{ padding: '0' }">
        <el-row>
          <el-form-item label="是否入组?" prop="joinGroup" label-width="80%">
            <el-radio-group v-model="zeroData.joinGroup" size="medium" :disabled="this.isModel">
              <el-radio v-for="(item, index) in joinGroupOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-card>
      <el-row :gutter="24" style="width: 100%;margin-left: 30%;margin-top: 10px; " v-show="!this.uploadLock">
        <el-col :span="8">
          <el-button @click="cancelForm">取消</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {listCrfZero, getCrfZero, delCrfZero, addCrfZero, updateCrfZero} from "@/api/crfZero/crfZero";
import {getTester} from "@/api/tester/tester";
import {pinyin} from 'pinyin-pro';

export default {
  components: {},
  props: [],
  data() {
    return {
      uploadLock: true,
      isModel: false,
      zeroData: {
        testerId: null,
        dateNow: '',
        name: undefined,
        fullName: '',  // 用于保存从数据库中获取的中文名字
        inHospital: undefined,
        height: undefined,
        weight: undefined,
        diagnosis: undefined,
        staticScore: undefined,
        actScore: undefined,
        heartRate: undefined,
        sysPres: undefined,
        diasPres: undefined,
        breath: undefined,
        temp: undefined,
        inclOne: null,
        inclTwo: null,
        inclThree: null,
        inclFour: null,
        inclFive: null,
        standOne: null,
        standTwo: null,
        standThree: null,
        standFour: null,
        standFive: null,
        standSix: null,
        standSeven: null,
        standEight: null,
        standNine: null,
        standTen: null,
        standElev: null,
        joinGroup: null,
        status: null
      },
      rules: {
        dateNow: [
          {required: true, message: '请输入访视日期', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '请输入姓名缩写', trigger: 'blur'}
        ],
        inHospital: [
          {required: true, message: '请输入住院号', trigger: 'blur'}
        ],
        height: [
          {required: true, message: '请输入身高', trigger: 'blur'}
        ],
        weight: [
          {required: true, message: '请输入体重', trigger: 'blur'}
        ],
        diagnosis: [
          {required: true, message: '请输入术前诊断', trigger: 'blur'}
        ],
        staticScore: [
          {required: true, message: '请输入静息评分', trigger: 'blur'}
        ],
        actScore: [
          {required: true, message: '请输入运动评分', trigger: 'blur'}
        ],
        heartRate: [
          {required: true, message: '请输入心率', trigger: 'blur'}
        ],
        sysPres: [
          {required: true, message: '请输入收缩压', trigger: 'blur'}
        ],
        diasPres: [
          {required: false, message: '请输入舒张压', trigger: 'blur'}
        ],
        breath: [
          {required: true, message: '请输入呼吸频率', trigger: 'blur'}
        ],
        temp: [
          {required: true, message: '请输入体温', trigger: 'blur'}
        ],
        inclOne: [
          {required: true, message: '请选择是否符合择期行混合痔外剥内扎术或肛瘘手术的入选标准', trigger: 'change'}
        ],
        inclTwo: [
          {required: true, message: '请选择是否符合BMI值在18-30kg/m2之间的入选标准', trigger: 'change'}
        ],
        inclThree: [
          {required: true, message: '请选择是否符合无镇痛药物和局麻药物过敏史的入选标准', trigger: 'change'}
        ],
        inclFour: [
          {required: true, message: '请选择是否符合无其他严重合并疾病的入选标准', trigger: 'change'}
        ],
        inclFive: [
          {required: true, message: '请选择是否符合能够签署知情同意书的入选标准', trigger: 'change'}
        ],
        standOne: [
          {required: true, message: '请选择是否符合有相关麻醉禁忌症的排除标准', trigger: 'change'}
        ],
        standTwo: [
          {required: true, message: '请选择是否符合术后住院时间<72h的排除标准', trigger: 'change'}
        ],
        standThree: [
          {required: true, message: '请选择是否符合近一年内曾行痔疮切除或肛瘘手术患者的排除标准', trigger: 'change'}
        ],
        standFour: [
          {required: true, message: '请选择是否符合伴有严重的心、肝、肾疾病者的排除标准', trigger: 'change'}
        ],
        standFive: [
          {required: true, message: '请选择是否符合不能表达主观不适症状者的排除标准', trigger: 'change'}
        ],
        standSix: [
          {required: true, message: '请选择是否符合接受其他有关治疗的排除标准', trigger: 'change'}
        ],
        standSeven: [
          {required: true, message: '请选择是否符合合并精神疾病或严重神经功能症患者的排除标准', trigger: 'change'}
        ],
        standEight: [
          {required: true, message: '请选择是否符合妊娠或哺乳期妇女的排除标准', trigger: 'change'}
        ],
        standNine: [
          {required: true, message: '请选择是否符合对试验药物过敏者的排除标准', trigger: 'change'}
        ],
        standTen: [
          {required: true, message: '请选择是否符合有滥用药物、毒品或酗酒史者的排除标准', trigger: 'change'}
        ],
        standEleven: [
          {required: true, message: '请选择是否符合研究者认为其不适合参与本项研究的排除标准', trigger: 'change'}
        ],
        joinGroup: [
          {required: true, message: '请选择是否入组', trigger: 'change'}
        ],
      },
      inclOneOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      inclTwoOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      inclThreeOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      inclFourOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      inclFiveOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standOneOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standTwoOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standThreeOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standFourOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standFiveOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standSixOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standSevenOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standEightOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standNineOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standTenOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      standElevenOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      joinGroupOptions: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取受试者中文名字
    if (this.$route.query.id != null) {
      getTester(this.$route.query.id).then(res => {
        if (res && res.data && res.data.name) {
          this.zeroData.fullName = res.data.name;  // 保存中文名字
          this.generateNameAbbreviation();         // 生成姓名缩写
        }
      });
    }
    // 检查该组件是否使用特定的ID创建
    if (this.$route.query.id && this.$route.query.f === '1') {
      this.uploadLock = false;
    }else{
      this.isModel = true;
    }
    if (this.$route.query.id != null){
      this.username = getTester(this.$route.query.id)
    }

    if (this.$route.query.id != null) {
      // 在创建组件时获取数据
      listCrfZero(this.$route.query.id).then(res => {
        console.log(res);
        if (res) {
          this.zeroData = res;
        }
      });
    }
  },
  mounted() {
    // 挂载组件时调用
  },
  methods: {
    /**
     * 提交表单数据
     */
    submitForm() {
      this.$refs['zeroForm'].validate(valid => {
        if (valid) {
          this.zeroData.status = 1;
          this.zeroData.testerId = this.$route.query.id;
          this.generateNameAbbreviation();
          console.log("当前表单数据:", this.zeroData);  // 打印当前表单数据
          listCrfZero(this.$route.query.id).then(res => {
            console.log(res);
            if (res) {
              // 如果数据已经存在，则更新数据
              updateCrfZero(this.zeroData).then(res => {
                console.log("修改了");
                this.$message.success('数据修改成功');
              }).catch(err => {
                console.error("修改数据时发生错误", err);
                this.$message.error('数据修改失败');
              });
            } else {
              // 如果不存在，则添加新数据
              addCrfZero(this.zeroData).then(res => {
                console.log(res.data);
                console.log("提交了");
                this.$message.success('数据提交成功');
              }).catch(err => {
                console.error("提交数据时发生错误", err);
                this.$message.error('数据提交失败');
              });
            }
          }).catch(err => {
            console.error("查询数据时发生错误", err);
            this.$message.error('查询数据时发生错误');
          });
        } else {
          this.zeroData.status = 2;
          this.zeroData.testerId = this.$route.query.id;
          console.log("当前表单数据:", this.zeroData);  // 打印当前表单数据
          listCrfZero(this.$route.query.id).then(res => {
            console.log(res);
            if (res) {
              // 如果数据已经存在，则更新数据
              updateCrfZero(this.zeroData).then(res => {
                console.log("修改了");
                this.$message.success('数据修改成功');
              }).catch(err => {
                console.error("修改数据时发生错误", err);
                this.$message.error('数据修改失败');
              });
            } else {
              // 如果不存在，则添加新数据
              addCrfZero(this.zeroData).then(res => {
                // console.log(res.data);
                console.log("提交了");
                this.$message.success('数据提交成功');
              }).catch(err => {
                console.error("提交数据时发生错误", err);
                this.$message.error('数据提交失败');
              });
            }
          }).catch(err => {
            console.error("查询数据时发生错误", err);
            this.$message.error('查询数据时发生错误');
          });
        }
      });
    },

    /**
     * 返回上一个页面
     */
    cancelForm() {
      this.$router.go(-1); // 返回到上一个页面
    },
    // 自动生成姓名缩写
    // 使用 pinyin-pro 库生成拼音缩写
    generateNameAbbreviation() {
      if (this.zeroData.fullName) {
        const nameParts = pinyin(this.zeroData.fullName, {pattern: 'pinyin', toneType: 'none', type: 'array'});
        let abbreviation = '';

        if (nameParts.length === 2) {
          // 两字姓名：每个字取前两个字母，确保四个字符
          abbreviation = nameParts[0].slice(0, 2).toUpperCase() + nameParts[1].slice(0, 2).toUpperCase();
        } else if (nameParts.length === 3) {
          // 三字姓名：前两个字取首字母，第三个字取首字母和第二个字母
          abbreviation = nameParts[0][0].toUpperCase() + nameParts[1][0].toUpperCase() + nameParts[2][0].toUpperCase() + (nameParts[2][1] ? nameParts[2][1].toUpperCase() : '');
        } else if (nameParts.length === 4) {
          // 四字姓名：每个字取首字母
          abbreviation = nameParts.map(part => part[0].toUpperCase()).join('');
        } else {
          // 其他情况留空
          abbreviation = '';
        }

        this.zeroData.name = abbreviation;  // 将生成的缩写填入表单
      } else {
        this.zeroData.name = '';  // 如果没有名字则为空
      }
    }

  }
}
</script>

<style>
.bottom_border input {
  border: none; /* 取消默认边框 */
  border-bottom: 1px solid #ccc; /* 设置底部边框 */
  font-size: 18px;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
}

.title {
  width: 80px;
  height: 25px;
  font-size: 20px;
  color: #169BD5;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
</style>
